import { Component, OnInit, TemplateRef, Input, EventEmitter, Output } from '@angular/core'
import { Router } from '@angular/router'
import { Location } from '@angular/common'

import { PageService } from '@shared/services/page.service'
import { primaryColor } from 'app/utils/contraints'

@Component({
  selector: 'app-content-header',
  templateUrl: './content-header.component.html',
  styleUrls: ['./content-header.component.less'],
})
export class ContentHeaderComponent implements OnInit {

  isShake = true

  /* 用户手动激活 tooltip */
  isShowTooltip = false

  /* 首次才触发胶囊效果 */
  firstCapsule: boolean

  @Input() isCapsule = false

  @Input() showSearch = false

  @Input() actionBgColor = primaryColor

  @Input() action: TemplateRef<void>
  @Input() payment: TemplateRef<void>
  @Input() manualVoid: TemplateRef<void>
  @Input() search: TemplateRef<void>
  @Input() custom: TemplateRef<void>

  @Output() actionClick = new EventEmitter()
  @Output() searchClick = new EventEmitter()

  btnStyle: any

  constructor(
    private router: Router,
    private location: Location,
    private pageService: PageService,
  ) { }

  ngOnInit() {
    this.firstCapsule = this.isCapsule
    if (this.isCapsule) {
      this.showTooltip()
    }
    this.pageService.isShake$.subscribe(this.shake.bind(this))
    this.initBtnStyle()
  }

  initBtnStyle() {
    this.btnStyle = {
      backgroundColor: this.actionBgColor,
      borderColor: this.actionBgColor,
      fontSize: '14px',
    }
  }

  showTooltip(): void {
    setTimeout(() => {
      this.isShowTooltip = true
      setTimeout(() => {
        this.isShowTooltip = false
      }, 3000)
    }, 3000)
  }

  shake(isShake: boolean) {
    this.isShake = isShake
    if (this.isShake) {
      /*
        因为加入了 shake 之后，class 整个都会刷新,
        这里做一个处理，第二次将胶囊动画手动去掉,
        这个动画本身也就只出现一次。
        */
      this.firstCapsule = false
    }
  }

  goBack(): void {
    this.location.back()
  }

  clickActionBtn(): void {
    this.actionClick.next()
  }

  traggleSearch(): void {
    this.showSearch = !this.showSearch
  }
}
